<template>
  <div ref="chart-container"></div>
</template>

<script>
import echarts from 'echarts';

const DefaultOption = () => {
  return {
    color: ['#1AAD19', '#00A0E9', '#EB6100', '#00CBDE'],
    legend: {
      textStyle:{
        color: '#fff',
      }
    }
  }
};

export default {
  name: "data-v-chart",
  props: {
    option: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    option(opt) {
      this.chart.setOption(opt);
      this.$emit('set-opt', this.chart);
    }
  },
  mounted() {
    var dom = this.$refs["chart-container"];
    this.initChart(dom);
  },
  methods: {
    initChart(dom) {
      this.chart = echarts.init(dom);
      let dft = DefaultOption();
      this.chart.setOption(dft);
      this.chart.setOption(this.option);
      this.$emit('set-opt', this.chart);
      window.addEventListener('resize', this.chart.resize);
    }
  }
};
</script>

